<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/img/logo.png" alt="网站logo"/>
    </div>
    <div class="nav">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
      >
        <el-menu-item index="/">系统门户</el-menu-item>

        <el-sub-menu index="1">
          <template #title>赋能平台</template>
          <el-menu-item index="intellComput">智算中心</el-menu-item>
          <el-menu-item index="knowhub">知识中枢</el-menu-item>
          <el-menu-item index="modelhub">模型中枢</el-menu-item>
          <el-menu-item index="applicationscen">场景应用中心</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="newsConsultation">
          新闻资讯
        </el-menu-item>

        <el-menu-item index="leadershipCare">
          领导关怀
        </el-menu-item>

        <el-menu-item index="servcapa">服务能力</el-menu-item>

        <el-menu-item index="massentre">双创系统</el-menu-item>
      </el-menu>

    </div>
    <div class="tools">
      <el-input
          class="responsive-input"
          placeholder="搜索..."
          :prefix-icon="Search"
      />
      <el-button class="login" type="primary">登录/注册</el-button>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {Calendar, Search} from '@element-plus/icons-vue'
import {useRouter, useRoute} from 'vue-router'  // 引入路由钩子
// 初始化路由实例
const router = useRouter()
const route = useRoute()
const path = route.path?.slice(1)
const activeIndex = ref(path || '/')
const handleSelect = (key, keyPath) => {
  if (key) {
    if( key === 'massentre' ){
      activeIndex.value = ''
      const { href } = router.resolve({
        path: '/massentre'  // 或使用命名路由: name: 'massentre'
      })
      window.open(href, '_blank')
    }else{
      // 执行路由跳转
      router.push(key)
      // 更新当前激活的菜单索引
      activeIndex.value = key
    }

  }
}
</script>
<style scoped>
.header {
  width: 100%;
  height: 90px;
  padding: 0 20px;
  display: flex;

  .logo {
    height: 100%;
    width: 200px;
    line-height: 90px;
    text-align: center;
    font-size: 40px;
    padding-left: 50px
  }

  .nav {
    flex: 1
  }

  .tools {
    width: 600px;
    padding: 15px 0;
  }
}

.el-menu-demo {
  height: 90px;
  border-bottom: 0;
}

.responsive-input {
  height: 60px;
  width: 340px;
}

.login {
  height: 60px;
  margin-left: 30px;
}
.nav ::v-deep .el-menu-item:focus{
  background-color: transparent;
  color: #333;
}
</style>